@font-face
{
  font-family: myFirstFont;
  src: url('font/a.ttf')
}
*{
  margin: 0px;
  padding: 0px;
  font-family:myFirstFont;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

}
a{
  color:inherit;
  text-decoration:none !important;
}
ol,li{
  list-style: none;
}
.icon{
  display: inline-block;
  vertical-align: middle;
}
.animated{
  animation-fill-mode:both;
}


@media (max-width: 414px) {
 html{font-size: 10px}
}
@media (max-width: 375px) {
 html{font-size:9px;}
}
@media (max-width: 320px) {
 html{ font-size:8px;}
}
html,body{
  width: 100%;
  overflow-x: hidden;
}
header{
  position: fixed;
  top:0px;
  left: 0px;
  right: 0px;
  padding: 0px 7%;
  display: flex;
  justify-content:space-between;
  color:#fff;
  font-size: 1.5rem;
  margin-top:3rem;
  letter-spacing: 0.3rem;
  z-index: 99;
  .search{
    .search_icon{
      width: 13px;
      height: 14px;
      background: url(../images/Search.png) no-repeat;
    }
  }
}
.menu{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  background-size: 100%;
  top:0px;
  left: -100%;
  z-index: 100;


  .close_menu{
    margin: 5rem 4.6rem;
    cursor: pointer;
    img{
      transform: rotate(0deg);
      &:hover{
        animation:_rotate 1s;
        -moz-animation:_rotate 1s; /* Firefox */
        -webkit-animation:_rotate 1s; /* Safari and Chrome */
        -o-animation:_rotate 1s; /* Opera */
      }
    }

  }

  ul{
    li{
      text-align: center;
      letter-spacing: 0.7rem;
      color:#959292;
      font-size: 3rem;
      margin-bottom:5rem;
      cursor: pointer;
      display: none;
    }
    li.active{
      color:#000000;
    }
  }
}
.index{
  background: url(../images/bg.png);
  background-size: 100%;
  .search{
    background: none;
  }
  .content{
    .banner{
      .name{
        position: absolute;
        opacity: 0;
      }
    }
    .line{
      width: 100%;
      position: fixed;
      bottom: 4.6rem;
      z-index: 99;
      .case-name{
        width:13rem;
        color:#616161;
        letter-spacing: 0.3rem;
        font-size: 1.87rem;
        background: #fff;
        margin: 0px auto;
        text-align: center;
        line-height: 4rem;
        border-radius:2rem;
        position: relative;
        z-index: 1;
      }
      .line-swiper{
        position: absolute;
        top:50%;
        border-top: 1px solid #fff;
        z-index: 0;
        left: 50%;
        .line-slide{
          float: left;
          width: 1rem;
          height: 1rem;
          border-radius: 100%;
          background: #fff;
          margin-right:12rem;
          position: relative;
          top:-0.5rem;
          &:last-child{
            margin-right: 0px;
          }
          div{
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100%;
            border-radius: 100%;
            border: 2px solid #fff;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
.product{
  header{
    color: #000000;
    position: relative;
  }
  .content{
    margin-top: 3rem;
    padding: 0px 7%;
    .product-group{
      .product-list{
        position: relative;
        margin-bottom: 2.3rem;
        img{
          width: 100%;

        }
        .introduce{
          position: absolute;
          bottom:0;
          left: 0px;
          right: 0px;
          padding:1rem 10%;
          letter-spacing: 0.3rem;
          font-size: 1.87rem;
          line-height: 3rem;
          background: #fff;
          border: 1px solid #e1e1e1;
        }
      }
    }
  }
}
.product-info{
  .close{
    position: absolute;
    top:3rem;
    left: 10%;
  }
  .back-top{
    display: none;
    position: fixed;
    bottom: 5.4rem;
    right: 2.2rem;
  }
  .content{
    .preview{
      img{
        display: block;
        width: 100%;
      }
    }
    .introduce{
      padding: 5rem 10%;
      color:#fff;
      background: #546751;
      .title{
        font-size: 4.7rem;
        letter-spacing: 0.3rem;
        margin-bottom: 3.8rem;
      }
      .label{
        letter-spacing: 0.3rem;
        font-size: 1.6rem;
        margin-bottom: 2.8rem;
      }
      .text{
        letter-spacing: 0.3rem;
        font-size: 1.6rem;
        line-height: 2.4rem;
        text-align: justify;
      }
    }
    .case-img{
      img{
        width: 100%;
        display: block;
      }
    }
  }
}
.search{
  background: black;
  .close_back{
    position: absolute;
    margin-top: 14%;
    left:10%;
    cursor: pointer;
    z-index: 99;
    img{
      width: 2rem;
    }
  }
  .content{
    position: absolute;
    width: 100%;
    color:#fff;
    margin-top:12%;
    margin-left: 11%;
    .search-input{
      margin-left: 10%;
      font-size:3rem;
    }
    .search-result{
      ul{
        animation-delay:1000ms;
        margin-top: 5rem;
        .search-list{
          margin-bottom: 4rem;
          .label{
            font-size:1.87rem;
          }
          .name{
            line-height: 6rem;
            font-size:3.2rem;
          }
        }
      }
    }
  }
}